/**
 * Icon component.
 * 
 * Style guide components.icon
 */
.icon {
    color: $color-white;

    /**
     * Default icon.
     *
     * Default icon style.
     *
     * Markup: icon_default.hbs
     *
     * Style guide components.icon.default
     */
    &-default {
        width: 1rem;
        height: 100%;
        transition: all 0.4s linear;
    }

    /**
     * Add icon.
     *
     * Icon rotate to be a cancel icon.
     *
     * Markup: icon_add.hbs
     *
     * Style guide components.icon.add
     */
    &-add {
        width: 1rem;
        height: 100%;
        transition: all 0.4s linear;
        transform:scale(1) rotate(225deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

    }
}
.fa {
    &-discord {
        background: url("./images/icons/icon-discord.svg") top left no-repeat;
        height: 2rem;
        width: 2rem;
    }
}